import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class AlbumListPageSate extends StatefulWidget {
  const AlbumListPageSate({super.key});

  @override
  State<AlbumListPageSate> createState() => _AlbumListPageSateState();
}

class _AlbumListPageSateState extends State<AlbumListPageSate> {
  List<String> imgs = RxList([]);

  ScrollController scrollController = ScrollController();

  bool isLoading = false;

  bool hasNext = true;

  int total = 30;

  @override
  void initState() {
    super.initState();
    initData();
    scrollController.addListener(() {
      if (!isLoading &&
          hasNext &&
          scrollController.position.pixels >= scrollController.position.maxScrollExtent) {
        setState(() {
          isLoading = true;
        });
        loadMoreData();
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.dispose();
  }

  Future<void> loadMoreData() {
    return Future.delayed(const Duration(seconds: 1), () {
      setState(() {
        if (total > imgs.length) {
          hasNext = true;
          isLoading = false;
          initData();
        } else {
          hasNext = false;
          isLoading = false;
        }
      });
    });
  }

  void initData() {
    for (var i = 75; i < 93; i++) {
      imgs.add('https://cdn7.axureshop.com/demo2023/2251242/images/景点相册/p$i.png');
    }
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: scrollController,
      padding: EdgeInsets.all(5.w),
      child: Column(
        children: [
          StaggeredGrid.count(
            crossAxisCount: 3,
            crossAxisSpacing: 5.w,
            mainAxisSpacing: 5.w,
            children: imgs
                .map((url) => CachedNetworkImage(
                      imageUrl: url,
                      width: 118.w,
                      height: 118.h,
                      fit: BoxFit.cover,
                      alignment: Alignment.topLeft,
                    ))
                .toList(),
          ),
          if (!hasNext) notDataBottom() else if (isLoading) renderBottom()
        ],
      ),
    );
  }

  Widget notDataBottom() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      child: const Text(
        '已经到底',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }

  Widget renderBottom() {
    if (isLoading) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '努力加载中...',
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF333333),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 3),
            ),
          ],
        ),
      );
    }
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      child: const Text(
        '上拉加载更多',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }
}
